<template>
  <el-table :data="tableData"    border :height="props.tableHeight || 'auto'"
            :header-cell-style="headerStyle"
            :stripe="!props.tableRowClass"
            @selection-change="handleSelectionChange"
            :row-class-name="props.tableRowClass"
            highlight-current-row>
    <el-table-column type="selection" width="45" v-if="props.selection"/>

    <el-table-column v-for="(item, index) in tableHeader" :prop="item.prop" :label="item.label" align="center"
                     :width="item.width" min-width="100px">
      <template #default="scope">
        <span v-if="item.type === 'html'" v-html="item.code(scope.row)"></span>
        <el-text style="cursor:pointer;" @click="item.method(scope.row)" v-else-if="item.type==='btn'" type="primary">
          {{ item.default || scope.row[item.prop] }}
        </el-text>
        <template v-else-if="item.type === 'fileList'">
          <p v-for="(item1,index1) in scope.row[item.prop]"
             @click="handlePreview(item1)"
             :key="index1"
             style="color: #409EFF;
               white-space: nowrap;
               text-overflow: ellipsis;
               overflow: hidden;
               cursor: pointer"
             :title="item1.name"
          >
            {{ item1.name }}
          </p>
        </template>
        <span v-else :title="scope.row[item.prop]" style="max-lines: 1;white-space: nowrap">{{
            scope.row[item.prop]
          }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="tableOptions" :label="tableOptions.label" align="center" :width="tableOptions.width">
      <template #default="scope">
        <el-button @click="item.method(scope.row)" :icon="item.icon" link type="primary"
                   v-for="item in tableOptions.options"
                   style="margin-left: 0"
                   v-show="item.show ? item.show(scope.row) : true"
                   :key="item">
          {{ item.label }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-col :span="24">
    <el-pagination v-if="props.pageData && !mobile" v-model:current-page="props.pageData.currentPage"
                   v-model:page-size="props.pageData.pageSize" :page-sizes="pageSizeData"
                   layout="total, sizes, prev, pager, next, jumper" :total="props.pageData.total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"/>
    <el-pagination
        small
        v-if="props.pageData && mobile"
        background
        @current-change="handleCurrentChange"
        v-model:current-page="props.pageData.currentPage"
        v-model:page-size="props.pageData.pageSize"
        layout="prev, pager, next"
        :total="props.pageData.total"
        class="mt-4"
    />

  </el-col>
  <el-image-viewer
      v-if="showViewer"
      :z-index="9999"
      @close="()=>{showViewer  =false}"
      :url-list="srcList"
  />
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {useFile} from "@/hooks/web/useFile";
import {useDevice} from '@/hooks/web/useDevice'

const {mobile} = useDevice()
const {handlePreview, showViewer, srcList} = useFile()
const props = defineProps({
  tableData: Array,
  tableHeader: Array,
  pageData: Object,
  tableOptions: Object,
  tableHeight: String,
  tableSelection: Object,
  currentPage: Number,
  pageSize: Number,
  selection: Boolean,
  tableRowClass:Function,
  total: {type: Number, default: 0}
})
const pageSizeData = ref([5, 10, 20, 50])
const emit = defineEmits(['handlePageChange', 'handleSelectChange'])

const handleSizeChange = (val) => {
  emit('handlePageChange', {page: props.pageData.currentPage, limit: val})
}


const handleCurrentChange = (val) => {
  emit('handlePageChange', {page: val, limit: props.pageData.pageSize})
}

const handleSelectionChange = (val) => {
  emit('handleSelectChange', val)
}



const headerStyle = () => {
  return {
    'font-size': '14px',
    'text-align': 'cenetr',
    background: '#fff'
  }
}
</script>

<style  lang="less">
.el-pagination {
  background-color: #fff;
  padding: 20px 0 20px 20px;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-danger-light-7);
}
// 如果使用了stripe斑马纹 可能需要加!important
// 鼠标经过颜色改为粉红色
.el-table__body  .warning-row:hover>td{
  background-color: var(--el-color-danger-light-8) !important;
}


</style>
